<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-02-09 17:29:47
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-02-21 14:37:24
 * @Description:
 *
-->

<template>
  <el-form
    ref="form"
    class="form-update"
    :rules="rules"
    :model="form"
    label-width="auto"
    size="medium"
  >
    <el-form-item label="规格名称" prop="name">
      <el-input
        v-model="form.name"
        :disabled="true"
        placeholder="请输入资源规格名称"
      />
    </el-form-item>
    <el-form-item class="item" label="云服务商" prop="cloudProvider">
      <el-input
        v-model="form.cloudProvider"
        :disabled="true"
        placeholder="请选择云服务商"
      />
    </el-form-item>
    <el-form-item class="item right" label="vCPU" prop="cpuCount">
      <el-input
        v-model="form.cpuCount"
        placeholder="请输入vCPU数"
        :disabled="true"
      />
    </el-form-item>
    <el-form-item class="item" label="内存" prop="memSize">
      <el-input
        v-model="form.memSize"
        placeholder="请输入内存"
        :disabled="true"
      />
    </el-form-item>
    <el-form-item class="item right" label="是否公有" prop="publicOwned">
      <el-select
        v-model="form.publicOwned"
        placeholder="请选择是否公有"
        style="width: 100%"
      >
        <el-option
          v-for="item in publicOwnedOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'FormUpdate',
  components: {},
  mixins: [],
  props: {
    updateInfo: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      publicOwnedOptions: [
        {
          lable: '是',
          value: '是'
        },
        {
          lable: '否',
          value: '否'
        }
      ], // 是否公有
      form: {
        name: '',
        cloudProvider: '',
        cpuCount: '',
        memSize: '',
        publicOwned: ''
      },
      // 校验规则
      rules: {
        name: [
          { required: true, message: '请输入资源规格名称', trigger: 'blur' }
        ],
        cloudProvider: [
          { required: true, message: '请选择云平台', trigger: 'change' }
        ],
        cpuCount: [
          { required: true, message: '请输入vCPU数', trigger: 'blur' }
        ],
        memSize: [
          { required: true, message: '请输入内存大小', trigger: 'blur' }
        ],
        publicOwned: [
          { required: true, message: '请选择是否公有', trigger: 'change' }
        ]
      }
    }
  },
  computed: {},
  watch: {
    'updateInfo.id': {
      handler(newVal) {
        if (newVal) {
          this.form = JSON.parse(JSON.stringify(this.updateInfo))
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    /**
     * @description: 校验
     * @return {*}
     */
    validateForm(callback) {
      this.$refs.form.validate((valid, obj) => {
        if (valid) {
          callback(this.form)
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.form-update {
  .item {
    display: inline-block;
    width: calc(50% - 10px);
    &.right {
      margin-left: 20px;
    }
  }
}
</style>
